<template>
	<div class="content">
		<div style="width: 90%;text-align: left;margin-top: 10px;font-size: 14px">{{ $t('ivcs.agentNum') }}</div>
		<Input v-model="agentId" :placeholder="$t('ivcs.inputAgentNum')" @input="changeAgentId($event)" style="width: 90%;margin-top: 10px"></Input>
		<div style="width: 90%;text-align: left;margin-top: 10px;font-size: 14px">{{ $t('ivcs.bizscenarios') }}</div>
		<Select v-model="bizScenarioId" class="select" :label-in-value="true" @on-change="bizScenarioChanged">
			<Option v-for="item in bizScenarios" :value="item.id" :key="item.id">{{ item.label }}</Option>
		</Select>
	</div>
</template>

<script>
export default {
	name: 'Transfer',
	props: ['bizScenarios'],
	data() {
		return {
			agentId: '', //搜索的坐席工号=坐席登录名
			bizScenarioId: '' //业务场景id
		};
	},
	watch: {
		'$store.state.bizScenarioId'(newValue) {
			this.bizScenarioId = newValue;
			this.$forceUpdate();
		}
	},
	mounted() {
		this.bizScenarioId = this.$store.state.bizScenarioId || '';
	},
	methods: {
		bizScenarioChanged(data) {
			if (data != undefined) {
				this.bizScenarioId = data.value;
				this.$store.state.bizScenarioId = data.value;
			}
		},
		changeAgentId(e) {
			this.$emit('changeAgentId', e);
		}
	}
};
</script>

<style scoped>
.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: 492px;
	height: 160px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 5px 7px 49px 5px rgba(44, 137, 234, 0.13);
}

.select {
	width: 90%;
	margin-top: 10px;
}
</style>
